<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>围住神经猫</title>
    <script src="../static/easeljs-0.7.1.min.js"></script>
    <script src="../static/tweenjs-0.5.1.min.js"></script>
    <link rel="stylesheet" href="../static/style.css">
</head>

<body>
    <h1>请用鼠标点击空白圆圈来抓捕神经猫！</h1>
    <canvas id="mycanvas" width="600px" height="600px"></canvas>
    <a href="/hello" class="btn">回到首页</a>
</body>

</html>

<script>
    var stage = new createjs.Stage('mycanvas');
    var gameView = new createjs.Container();
    gameView.x = 30;
    gameView.y = 30;
    stage.addChild(gameView);
    // 画圆
    // var s = new createjs.Shape();
    // s.graphics.beginFill('#FF0000');
    // s.graphics.drawCircle(50, 50, 25);
    // s.graphics.endFill();
    // gameView.addChild(s);

    // 设置帧率
    createjs.Ticker.setFPS(30);
    // 设置监听事件
    createjs.Ticker.addEventListener('tick', function () {
        stage.update();
    })

    // 创建圆函数(封装圆的颜色)
    function Circle() {
        // 继承Shap类
        createjs.Shape.call(this);
        this.setCircleType = function (type) {
            this._circleType = type;
            switch (type) {
                case Circle.TYPE_UNSELECTED:
                    this.setColor("#ccc");
                    break;
                case Circle.TYPE_SELECTED:
                    this.setColor("#ff6600");
                    break;
                case Circle.TYPE_CAT:
                    this.setColor("#00008B");
                    break;
            }
        }

        this.setColor = function (colorString) {
            this.graphics.beginFill(colorString);
            this.graphics.drawCircle(0, 0, 25);
            this.graphics.endFill();
        }

        this.getCircleType = function () {
            return this._circleType
        }
        // 设置默认值使灰色
        this.setCircleType(Circle.TYPE_UNSELECTED);
    }
    Circle.prototype = new createjs.Shape();
    Circle.TYPE_UNSELECTED = 1;
    Circle.TYPE_SELECTED = 2;
    Circle.TYPE_CAT = 3;



    // 创建九行九列
    var circleArr = [[], [], [], [], [], [], [], [], []];
    var currentCat;
    var Move_none = -1, Move_left = 0, Move_up_left = 1, Move_up_right = 2, Move_right = 3, Move_down_right = 4, Move_down_left = 5;

    function getMovedir(cat) {
        var distanceMap = [];
        // left
        can = true;
        for (var x = currentCat.indexX; x >= 0; x--) {
            if (circleArr[x][currentCat.indexY].getCircleType() == Circle.TYPE_SELECTED) {
                can = false;
                distanceMap[Move_left] = cat.indexX - x;
                break;
            }
        }
        if (can) {
            return Move_left;
        }
        // left up
        can = true;
        var x = cat.indexX, y = cat.indexY;
        while (true) {
            if (circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED) {
                can = false;
                distanceMap[Move_up_left] = cat.indexY - y;
                break;
            }
            if (y % 2 == 0) {
                x--;
            }
            y--;
            // 判断边界
            if (x < 0 || y < 0) {
                break;
            }
        }
        if (can) {
            return Move_up_left;
        }
        // right up
        can = true;
        x = cat.indexX;
        y = cat.indexY;
        while (true) {
            if (circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED) {
                can = false;
                distanceMap[Move_up_right] = cat.indexY - y;
                break;
            }
            if (y % 2 == 1) {
                x++;
            }
            y--;
            // 判断边界
            if (x > 8 || y < 0) {
                break;
            }
        }
        if (can) {
            return Move_up_right;
        }
        // right
        can = true;
        for (var x = currentCat.indexX; x <= 8; x++) {
            if (circleArr[x][currentCat.indexY].getCircleType() == Circle.TYPE_SELECTED) {
                can = false;
                distanceMap[Move_right] = x - cat.indexX;
                break;
            }
        }
        if (can) {
            return Move_right;
        }
        // right down
        can = true;
        x = cat.indexX;
        y = cat.indexY;
        while (true) {
            if (circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED) {
                can = false;
                distanceMap[Move_down_right] = y - cat.indexY;
                break;
            }
            if (y % 2 == 1) {
                x++;
            }
            y++;
            // 判断边界
            if (x > 8 || y > 8) {
                break;
            }
        }
        if (can) {
            return Move_down_right;
        }
        // left down
        can = true;
        x = cat.indexX;
        y = cat.indexY;
        while (true) {
            if (circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED) {
                can = false;
                distanceMap[Move_down_left] = y - cat.indexY;
                break;
            }
            if (y % 2 == 0) {
                x--;
            }
            y++;
            // 判断边界
            if (x < 0 || y > 8) {
                break;
            }
        }
        if (can) {
            return Move_down_left;
        }
    }


    function addCircles() {
        for (var indexX = 0; indexX < 9; indexX++) {
            for (var indexY = 0; indexY < 9; indexY++) {
                // 创建一个圆对象
                var c = new Circle();
                gameView.addChild(c);
                circleArr[indexX][indexY] = c;
                c.indexX = indexX;
                c.indexY = indexY;
                c.x = indexY % 2 ? indexX * 55 + 25 : indexX * 55;
                c.y = indexY * 55;

                // 绘制猫于正中央
                if (indexX == 4 && indexY == 4) {
                    c.setCircleType(Circle.TYPE_CAT);
                    currentCat = c;
                } else if (Math.random() < 0.1) {
                    c.setCircleType(Circle.TYPE_SELECTED)
                }
                c.addEventListener("click", circleClicked)
            }
        }
    }
    addCircles();

    function circleClicked(e) {
        // target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素
        // 获取当前操作的事件源
        if (e.target.getCircleType() != Circle.TYPE_CAT) {
            e.target.setCircleType(Circle.TYPE_SELECTED)
        } else {
            return;
        }
        if (currentCat.indexX == 0 || currentCat.index == 8 || currentCat.indexY == 0 || currentCat.indexY == 8) {
            alert("游戏结束~");
            return;
        }
        var dir = getMovedir(currentCat);
        switch (dir) {
            case 0:
                currentCat.setCircleType(Circle.TYPE_UNSELECTED);
                currentCat = circleArr[currentCat.indexX - 1][currentCat.indexY];
                currentCat.setCircleType(Circle.TYPE_CAT);
                break;
            case 1:
                currentCat.setCircleType(Circle.TYPE_UNSELECTED);
                currentCat = circleArr[currentCat.indexX - 1][currentCat.indexY - 1];
                currentCat.setCircleType(Circle.TYPE_CAT)
                break;
            case 2:
                currentCat.setCircleType(Circle.TYPE_UNSELECTED);
                currentCat = circleArr[currentCat.indexX + 1][currentCat.indexY - 1];
                currentCat.setCircleType(Circle.TYPE_CAT)
                break;
            case 3:
                currentCat.setCircleType(Circle.TYPE_UNSELECTED);
                currentCat = circleArr[currentCat.indexX + 1][currentCat.indexY];
                currentCat.setCircleType(Circle.TYPE_CAT)
                break;
            case 4:
                currentCat.setCircleType(Circle.TYPE_UNSELECTED);
                currentCat = circleArr[currentCat.indexX + 1][currentCat.indexY + 1];
                currentCat.setCircleType(Circle.TYPE_CAT)
                break;
            case 5:
                currentCat.setCircleType(Circle.TYPE_UNSELECTED);
                currentCat = circleArr[currentCat.indexX - 1][currentCat.indexY + 1];
                currentCat.setCircleType(Circle.TYPE_CAT)
                break;
            default:
                alert("游戏结束~");
        }
    }
</script>